<template>
	<view>
		<view class='list_con'>
			<view class='orderList' v-for="(item,index) in list" :key="index" @tap="goDetail(item.orderId,item.state)">
				<view class='left_orderList'>
					<text class='title_orderList'>{{item.orderId}}</text>
				</view>
				<view class='right_orderList'>
					<view class='pre_money'>
						<text class='text_momey floatR'>{{item.price}}</text>
						<text class='text_money_dw floatR'>￥</text>
					</view>
				</view>
				<view class='leaseDateArea'>
					<view class='pre_leaseDate'>
						<text class='lable_leaseDate'>租赁日期：</text>
						<text class='leaseDate'>{{item.createDate}}</text>
					</view>
					<view class='pre_leaseDate'>
						<text class='lable_leaseDate'>拟定归还：</text>
						<text class='leaseDate'>{{item.drawUpDate}}</text>
					</view>
					<view class='statue_orderList'>
						<text class='lable_statue'>状态：</text>
						<text class='text_statue' :class="item.state == '已超时' || item.state == '异常单' ? 'active' : ''">{{item.state}}</text>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import config from '@/common/config.js'
	export default {
		components: {
			uniIcons
		},
		data() {
			return {
				beginDate: '',
				endDate: '',
				userId: uni.getStorageSync('userId'),
				apiUrl: config.apiHost,
				list: [],
				role: 0
			}
		},
		onLoad(option) {
			if (option.role) {
				this.role = option.role
			}
			if (option.beginDate) {
				this.beginDate = option.beginDate
				this.endDate = option.endDate
				this.getList()
			} else {
				this.getMineList()
			}
		},
		methods: {
			goDetail(orderId, state) {
				if (this.role != 0) {
					return
				} else {
					if (state == '未支付') {
						console.log('状态0')
						uni.showToast({
							icon: 'none',
							title: '订单已关闭'
						})
					} else if (state == '未取车') {
						console.log('状态1')
						uni.navigateTo({
							url: './orderReceive?orderId=' + orderId
						})
					} else if (state == '使用中') {
						console.log('状态2')
						uni.navigateTo({
							url: './orderOver?orderId=' + orderId
						})
					} else if (state == '已完成') {
						console.log('状态3')
						uni.navigateTo({
							url: './orderComplete?orderId=' + orderId
						})
					} else if (state == '已超时') {
						console.log('状态4')
						uni.showToast({
							icon: 'none',
							title: '订单已超时，请续租'
						})
					} else if (state == '异常单') {
						console.log('状态5')
						uni.showToast({
							icon: 'none',
							title: '订单状态异常，请联系客服'
						})
					}
				}

			},
			getList() {
				uni.request({
					url: this.apiUrl + '/api/order/selectOrder',
					method: 'POST',
					contentType: 'application/jason',
					data: {
						beginDate: this.beginDate,
						endDate: this.endDate,
						userId: this.userId
					},
					success: res => {
						console.log(res)
						if (res.data.code == 200) {
							for (let i = 0; i < res.data.data.length; i++) {
								if (res.data.data[i].state == 0) {
									res.data.data[i].state = '未支付'
								} else if (res.data.data[i].state == 1) {
									res.data.data[i].state = '未取车'
								} else if (res.data.data[i].state == 2) {
									res.data.data[i].state = '使用中'
								} else if (res.data.data[i].state == 3) {
									res.data.data[i].state = '已完成'
								} else if (res.data.data[i].state == 4) {
									res.data.data[i].state = '已超时'
								} else if (res.data.data[i].state == 5) {
									res.data.data[i].state = '异常单'
								}
							}
							this.list = res.data.data
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							})
						}
					}
				});
			},
			getMineList() {
				uni.request({
					url: this.apiUrl + '/api/order/selectOrderByUserId',
					method: 'POST',
					contentType: 'application/json',
					data: {
						userId: this.userId
					},
					success: res => {
						console.log(res)
						if (res.data.code == 200) {
							for (let i = 0; i < res.data.data.length; i++) {
								if (res.data.data[i].state == 0) {
									res.data.data[i].state = '未支付'
								} else if (res.data.data[i].state == 1) {
									res.data.data[i].state = '未取车'
								} else if (res.data.data[i].state == 2) {
									res.data.data[i].state = '使用中'
								} else if (res.data.data[i].state == 3) {
									res.data.data[i].state = '已完成'
								} else if (res.data.data[i].state == 4) {
									res.data.data[i].state = '已超时'
								} else if (res.data.data[i].state == 5) {
									res.data.data[i].state = '异常单'
								}
							}
							this.list = res.data.data
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							})
						}
					}
				});
			}
		}
	}
</script>

<style>
	.active {
		color: #fb4343
	}

	.list_con {
		width: 100%;
		height: auto;
	}

	.orderList {
		width: 100%;
		height: auto;
		float: left;
		margin-top: 1px;
		background: #fff;
		padding: 3% 0 1% 0;
		border-bottom: solid 1px #efefef;
	}

	.left_orderList {
		width: 67%;
		height: auto;
		float: left;
		margin-left: 3%;
	}

	.right_orderList {
		width: 25%;
		height: auto;
		float: left;
		margin-left: 2%;
	}

	.title_orderList {
		width: 100%;
		min-height: 18px;
		float: left;
		margin-bottom: 5px;
		font-size: 1.1em;
		line-height: 18px;
		font-weight: 600;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.pre_leaseDate {
		width: 65%;
		height: 24px;
		float: left;
		color: #8e8d8d;

	}

	.pre_leaseDate text {
		width: auto;
		height: 24px;
		line-height: 24px;

	}

	.statue_orderList {
		width: 30%;
		height: 24px;
		float: right;
		color: #8e8d8d;
		text-align: right;
	}

	.statue_orderList text {
		width: auto;
		height: 24px;
		line-height: 24px;

	}

	.leaseDateArea {
		width: 94%;
		height: auto;
		float: left;
		margin-left: 3%;
	}
</style>
